<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML AppKit Core Sign Client Example</title>
    <link rel="stylesheet" href="/src/main.css" />
    <link
      rel="icon"
      type="image/png"
      href="/favicon-dark.png"
      media="(prefers-color-scheme: light)"
    />
    <link rel="icon" type="image/png" href="/favicon.png" media="(prefers-color-scheme: dark)" />
  </head>

  <body>
    <div class="page-container" id="app">
      <div class="logo-container">
        <img id="reown-logo" src="/reown-logo.png" alt="Reown" width="150" />
        <img src="/appkit-logo.png" alt="AppKit" width="150" />
      </div>

      <h1 class="page-title">HTML AppKit Core Sign Client Example</h1>

      <div class="appkit-buttons-container">
        <div class="row">
          <button id="disconnect">Disconnect</button>
          <button id="sign-message">Sign Message</button>
          <button id="connect">Connect</button>
        </div>
        <div class="row">
          <button id="switch-network-eth">Switch to Ethereum</button>
          <button id="switch-network-polygon">Switch to Polygon</button>
          <button id="switch-network-solana">Switch to Solana</button>
          <button id="switch-network-bitcoin">Switch to Bitcoin</button>
        </div>
      </div>

      <div class="code-container-wrapper">
        <section class="code-container">
          <h2 class="code-container-title">Account</h2>
          <div class="code-container-content">
            <pre id="account"></pre>
          </div>
        </section>

        <section class="code-container">
          <h2 class="code-container-title">Network</h2>
          <div class="code-container-content">
            <pre id="network"></pre>
          </div>
        </section>

        <section class="code-container">
          <h2 class="code-container-title">Session</h2>
          <div class="code-container-content">
            <pre id="session"></pre>
          </div>
        </section>
      </div>

      <div class="footer">
        <div class="footer-links">
          <a href="https://reown.com" target="_blank" rel="noreferrer"> Reown </a>
          •
          <a href="https://docs.reown.com" target="_blank" rel="noreferrer"> Docs </a>
          •
          <a href="https://github.com/reown-com/appkit" target="_blank" rel="noreferrer">
            GitHub
          </a>
          •
          <a href="https://cloud.reown.com" target="_blank" rel="noreferrer"> Cloud </a>
        </div>
        <p class="warning">This project ID only works on localhost. Go to Cloud to get your own.</p>
      </div>
    </div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
